<%@ page language="java" import="java.util.*" import="java.sql.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="sql" scope="page" class="com.tzq.JAVABEAN.ConnectDB" />
<html>
<head>
<%
	String userId = request.getParameter("userid");
	String userName = null;
	if(userId == null){
		response.sendRedirect(request.getContextPath()+"/Public/Video.jsp");
		return;
	}
	String sessionPid = null;
	if(session.getAttribute("pid")!=null){
		sessionPid=session.getAttribute("pid").toString();
	}
	boolean flag = userId.equals(sessionPid);
	try {
		ResultSet rsUser = sql.executeQuery("SELECT UserName FROM Userinfo WHERE UserID=?", new String[]{userId}, new boolean[]{true});
		if (rsUser.next()) {
			userName = rsUser.getString("UserName");
			rsUser.close();
		}
		else {
			out.println("User does not exist.");
			rsUser.close();
			return;
		}
	} catch (Exception e) {
		e.printStackTrace();
	}%>
<meta http-equiv="content-type" content="text/html" />
<title>毕业生，你的选择</title>
<link rel="stylesheet" type="text/css" href="../css/MyVideo.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.custom.css" />
<script src="../js/jQuery1.82.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="../js/school.js" type="text/javascript"></script>
<script type="text/javascript">
        function createMain(){
            var _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
            var _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
                document.getElementById("main").style.left=(_scrollWidth-950)/2+"px";
               // document.getElementById("m").style.height=_scrollHeight+"px";
        }
        function naviover(val){
            document.getElementById(val).style.backgroundColor="#E1DACF";
        }
        function naviout(val){
            document.getElementById(val).style.backgroundColor="#C5C5C5";
        }
        $(document).ready(function() {
			/*	2nd example	*/
			
			$("#menu2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menu2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});
		});
        function showEdit(editId){
            document.getElementById(editId).style.display='block';
        }
        function showClick(editId){
            document.getElementById(editId).style.display='none';
        }
        function uploadVideo(){
            var msgw,msgh,bordercolor;
            msgw=472;//提示窗口的宽度
            msgh=230;//提示窗口的高度
            titleheight=25; //提示窗口标题高度
            bordercolor="#FF3C00";//提示窗口的边框颜色
            titlecolor="#D2CECE";//提示窗口的标题颜色
            var scrollH=document.body.scrollTop;
    
            var sWidth,sHeight;
            //sWidth=document.body.offsetWidth; //得出当前屏幕的宽
            sWidth=document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height;//得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY){
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight){
                sHeight = document.body.scrollHeight;
            }else{
                sHeight = document.body.offsetHeight;
            }//以上得到整个屏幕的高

            var bgObj=document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position="relative";//把bgDiv这个div绝对定位
            bgObj.style.background="#fff";//背景颜色
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
            bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
            bgObj.style.marginLeft="0px";//左边为0
            bgObj.style.marginTop="0px";//左边为0
            bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
            bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
            bgObj.style.zIndex = "100";//层的z轴位置
            document.body.appendChild(bgObj);
    
            var msgObj=document.createElement("div");//创建一个div对象
            msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align","center");//为div的align赋值
            msgObj.style.background="white";//背景颜色为白色
            msgObj.style.border="1px solid #AAA";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = (sWidth-msgw)/2+"px";//从左侧开始位置
            msgObj.style.top = (scrollH+150)+"px";//从上部开始位置
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            //msgObj.style.marginLeft = "-225px";//左外边距
            //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
            msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
            msgObj.style.height =msgh + "px";//提示框的高(上面定义过)
            msgObj.style.textAlign = "center";//文本位置属性，居中。
            msgObj.style.lineHeight ="25px";//行间距
            msgObj.style.zIndex = "101";//层的z轴位置

            var str="";
            str+="<h4 id=msgTitle>";
            str+="上传视频</h4>";
            str+="<iframe name='uploadIfr' style='display:none;'></iframe>";
            str+="<form method='post' action='UploadVideo' ENCTYPE='multipart/form-data' name='VideoUploadForm' id='VideoUploadForm' target='uploadIfr' >";
            str+="<div id='bottom'>";
            str+="<div id='pbar'></div> ";
            str+="<input type='button' name='createCancel' value='取消' class='Albumbtn'/>";
            str+="<input  name='createOk' value='上传' class='Albumbtn' type='submit'  name='UploadButton' id='UploadButton'/>";
            str+="</div>";
            str+="<div id='selectFile'>";
            str+="视频标题: <input type='text' name='VideoTitle' id='VideoTitle'/>";
            str+="</div>";
            str+="<div id='AlbumName'>";
            str+="选择视频：<input type='file' name='aName' class='Albuminput' name='VideoFile' id='VideoFile'/>";
            str+="</div>";
            str+="<div id='AlbumDes'>";
            str+="视频描述:";
            str+="<textarea class='Albumtext' name='VideoDescription' id='VideoDescription'></textarea>";
            str+="</div>";
            str+="</form>";
            msgObj.innerHTML=str;
            bgObj.onclick=function(){
                document.body.removeChild(bgObj);//移除遮罩层
                document.body.removeChild(msgObj);//移除提示框
                };
            document.body.appendChild(msgObj);//在body中画出提示框层
            
            
            $(document).ready(function(){
    			var form = $('#VideoUploadForm');

    			var stateBar = $('#pbar').progressbar();
    			
    			var setState = function( val ){

    				stateBar.progressbar( "value", val * 100 );
    			};
    			
    			form.bind("submit", function(){
    				
    				console.log("submit called");
    				var url = "UploadVideo";
    				var currentState = 0;// 进度
    				var stateHandler = function( jsonObj ){
    					console.log(jsonObj);
    					if( jsonObj.error == 0 ){
    						currentState = jsonObj.readedBytes / jsonObj.totalBytes;
    						setState( currentState );
    						return true;
    					}
    					else
    						return false;
    				};
    				
    				function rmMask(){
    					document.body.removeChild(bgObj);//移除遮罩层
		                document.body.removeChild(msgObj);//移除提示框
    				};
    				
    				setTimeout( (function stateRequest(){
    					$.ajax({
    						"url" : url	
    					}).done(function( jsonObj ){
    						console.log(jsonObj);
    						jsonObj = JSON.parse( jsonObj.toString() );
    						if( stateHandler( jsonObj ) )
    							setTimeout( stateRequest, 100 );
    						else
    							rmMask();
    					});
    				}), 1000 );
    				return true;
    			});
    			
    		});
            
        }
    </script>
</head>
<%
ResultSet rsname = sql.executeQuery("select UserName from Userinfo where UserID="+userId+"");
String Uname="";
if(rsname.next()){
	Uname=rsname.getString("UserName");
}
%>
<body class="body">
	<div class="main" id="main">
		<span class="title"><%=Uname %>的空间</span>
		<div id="menu2" class="menu">
			<ul>
				<li id="info"><a href="/Bys-Website/PersonMainPage.jsp?userID=<%=userId%>">个人信息</a></li>
				<li id="video"><a href="/Bys-Website/PersonVideo/MyVideo.jsp?userid=<%=userId %>">个人视频</a></li>
				<li id="photo"><a href="/Bys-Website/PersonImage/MyImage.jsp?userid=<%=userId%>">个人相册</a></li>
				<li id="blog"><a href="/Bys-Website/PersonBlog/MyBlog.jsp?userid=<%=userId%>">个人博客</a></li>
				<li><a href="javascript:;">Contacts</a></li>
			</ul>
		</div>
		<div id="photode">
			<div class="phototitle">
				&nbsp;我的视频
				<form>
				<%if (flag) {%>
				<input type="button" value="上传视频" class="inputupload"
						onclick="uploadVideo()" />
				<%}%>	
				</form>
			</div>
			<div class="photolist">
				<ul>
					
						<%try{
							int k=1;
							ResultSet rsVideo = sql.executeQuery("SELECT * FROM Videos WHERE UserID=? ORDER BY ClickTimes DESC", new String[]{userId}, new boolean[]{true});
							while(rsVideo.next()) {
							String pId="photo"+k;
							String editId="edit"+k;
							%>
							<li>
							<div class="eachphoto" id="<%=pId %>" onmouseover="showEdit('<%=editId %>')" onmouseout="showClick('<%=editId%>')">
										<a href="ShowVideo.jsp?vid=<%=rsVideo.getString("VideoID") %>" target="_blank">
										<img src="<%=request.getContextPath() %><%=rsVideo.getString("ThumbnailPath") %>" /></a>
										<div class="photoname"><%=rsVideo.getString("VideoDescription") %></div>
										<div class="photoedit" id="<%=editId%>">
											<a href="#">编辑</a>&nbsp;&nbsp; <a href="#">删除</a>
										</div>
							</div>
							</li>
							<%k++;}
							rsVideo.close();
							sql.closeConnection();
						} catch (Exception e) {
							e.printStackTrace();
						}%>				
				</ul>
			</div>
		</div>
	</div>
	<script>    
        createMain();
    </script>
	<div class="topbar">
		<div class="logo">
			<a href="/Bys-Website/Public/home.jsp">
            	<img src="/Bys-Website/SourceImageFile/toplogo.jpg"/>
            </a>
		</div>
		<div class="navi">
			<ul class="naviul">
				<li><a href="/Bys-Website/Public/Video.jsp" class="outli">视频</a></li>
				<li><a href="/Bys-Website/Public/Photo.jsp" class="outli">相册</a></li>
				<li><a href="/Bys-Website/Public/Blog.jsp" class="inli">博客</a></li>
			</ul>
		</div>
		<div class="loginfo">
			 <ul class="loginfoul">
				<%if(session.getAttribute("pid")==null){%>
				<li><a href="/Bys-Website/Log_in.jsp">登录</a></li>
				<li><a href="/Bys-Website/Regist.jsp">注册</a></li>
			<%}else{%>
				<li><a href="../PersonMainPage.jsp?userID=<%=sessionPid  %>"><%=session.getAttribute("username").toString()%></a></li>
				<li><a href="../LoginServlet?method=1">退出</a></li>
			<%}%>
			</ul>
		</div>
	</div>
</body>
</html>